<script setup>
import { ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API

//引入子组件

//引入props

//引入store
import { useMemberStore } from '@/store'
const memberStore = useMemberStore()
import { storeToRefs } from 'pinia'

// 获取用户信息
const { profile } = storeToRefs(memberStore)

//请求数据初始化页面
onLoad(async () => {
  //初始化页面
  await memberStore.getProfile()
})

const handleUpdate = async () => {
  await memberStore.updateProfile(profile.value)
}

const handleGenderChange = (event) => {
  profile.value.gender = event.detail.value
}

const handleBirthdayChange = (event) => {
  profile.value.birthday = event.detail.value
}
</script>

<template>
  <view class="form-container">
    <view class="form-item">
      <text>头像：</text>
      <image :src="profile.avatar" mode="aspectFill" class="avatar" />
    </view>
    <view class="form-item">
      <text>账号：</text>
      <input v-model="profile.account" placeholder="请输入账号" />
    </view>

    <view class="form-item">
      <text>生日：</text>
      <picker
        class="picker"
        mode="date"
        :value="profile?.birthday"
        start="2000-01-01"
        :end="new Date().toISOString().split('T')[0]"
        @change="handleBirthdayChange"
      >
        <view v-if="profile?.birthday">{{ profile?.birthday }}</view>
        <view class="placeholder" v-else>请选择日期</view>
      </picker>
    </view>
    <view class="form-item">
      <text>地区：</text>
      <input v-model="profile.fullLocation" placeholder="请输入地区" />
    </view>
    <view class="form-item">
      <text>性别：</text>
      <radio-group @change="handleGenderChange">
        <label>
          <radio value="男" :checked="profile.gender === '男'" /> 男
        </label>
        <label>
          <radio value="女" :checked="profile.gender === '女'" /> 女
        </label>
      </radio-group>
    </view>
    <view class="form-item">
      <text>昵称：</text>
      <input v-model="profile.nickname" placeholder="请输入昵称" />
    </view>
    <view class="form-item">
      <text>职业：</text>
      <input v-model="profile.profession" placeholder="请输入职业" />
    </view>
    <button class="update-btn" @tap="handleUpdate">更新个人信息</button>
  </view>
</template>

<style lang="scss">
.form-container {
  padding: 20rpx;

  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    text {
      width: 120rpx;
      font-size: 28rpx;
      color: #333;
    }

    input {
      flex: 1;
      height: 80rpx;
      padding: 0 20rpx;
      border: 1rpx solid #ddd;
      border-radius: 10rpx;
      font-size: 28rpx;
    }
  }
}
.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}
.update-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #27ba9b;
  color: #fff;
  border-radius: 10rpx;
  margin-top: 40rpx;
}
</style>
